﻿<div class="ld-tabs">
    <ul>
        <li class="k-state-active">产品列表</li>
    </ul>
    <div>
        <div class="k-block divToolbar">
            <div style="display: inline-block; vertical-align: top">
                <input id="txtCategories" style="width: 300px;" />
            </div>
            <span class="k-textbox k-space-right">
                <input type="text" placeholder="请输入产品名称" id="txtKey" />
                <a href="javascript:FilterProducts()" class="k-icon k-i-search">&nbsp;</a>
            </span>
            <button class="k-button" onclick="CreateNewProduct()"><span class="k-icon k-i-plus"></span><span>添加新产品</span></button>
            <a class="k-button" onclick="Export()"><span class="k-icon k-i-calendar"></span><span>导出产品</span></a>
        </div>
        <div id="grid_product" style="text-align: center"></div>
        <form id="exportForm" method="post" action="/Products/Product/Export" target="_blank" style="display:none">
            <input type="hidden" name="categorys" id="df_categorys" />
            <input type="hidden" name="key" id="df_key" />
        </form>
    </div>
</div>

<script class="init">
    LocatedMenu("产品目录", "产品管理");

    $("#txtCategories").kendoMultiSelect({
        placeholder: "请选择所属分类...",
        dataTextField: "CategoryName",
        dataValueField: "ID",
        dataSource: Whale.dataSource({
            url: "/Products/Category/GetCategories"
        }),
        change: function (e) {
            FilterProducts();
        }
    });

    function Export() {
        $("#df_categorys").val($("#txtCategories").data("kendoMultiSelect").value().join(','));
        $("#df_key").val($.trim($("#txtKey").val()));
        $("#exportForm").submit();
    }
</script>

<script class="grid_product_columns">
    var productFields = [{
        title: "产品编码",
        field: "ProductNo",
        width: 100
    }, {
        title: "产品名称",
        field: "ProductName",
        width: 250
    }, {
        title: "拼音码",
        field: "Pinyin",
        width: 120
    }, {
        title: "单位",
        field: "UnitName",
        width: 60
    }, {
        title: "辅助单位",
        field: "AssistantUnitName",
        width: 80
    }, {
        title: "比率",
        field: "AssistantUnitRate",
        width: 50
    }, {
        title: "所属分类",
        template: "#=ShowCategories(Categories)#",
        width: 150
    }, {
        title: "状态",
        template: "#=GeneralStatus(Status)#",
        width: 50
    }, {
        title: "操作",
        template: "#=GetOperations(ID)#",
        attributes: { style: "text-align:left" }
    }];

    function GetOperations(id) {
        var html = "<button class='k-button' onclick=\"EditProduct(" + id + ")\"><span class='k-icon k-i-pencil'></span><span>修改</span></button>";
        html += "<button class='k-button' onclick=\"DeleteProduct(" + id + ")\"><span class='k-icon k-i-close'></span><span>删除</span></button>";
        return html;
    }

    function EditProduct(id) {
        if (wndGeneralEdit != null && typeof wndGeneralEdit != "undefined") {
            wndGeneralEdit.setOptions({ title: "修改产品信息" });
            wndGeneralEdit.refresh({ url: "/Products/Product/Edit/" + id });
            wndGeneralEdit.open();
        }
    }

    function DeleteProduct(id) {
        if (confirm("真的要删除这个产品吗？")) {
            Whale.Remote.Operation({
                url: "/Products/Product/Delete",
                parameters: { productID: id },
                success: function (result) {
                    if ($("#grid_product").length > 0)
                        $("#grid_product").data("kendoGrid").dataSource.read();
                },
                error: function (msg) {
                    wndGeneralInformation.content(msg).open();
                }
            });
        }
    }

    function ShowCategories(cats) {
        var html = "";
        $(cats).each(function (i) {
            html += "," + cats[i].CategoryName;
        });
        return html.substring(1);
    }

    function ShowUnits(units) {
        var html = "";
        $(units).each(function (i) {
            html += "," + units[i].UnitName;
        });
        return html.substring(1);
    }
</script>

<script class="grid_config">
    $(function () {
        $("#grid_product").kendoGrid({
            columns: productFields,
            dataSource: Whale.dataSource({
                url: "/Products/Product/Gets",
                getParameters: function () {
                    return {
                        key: $.trim($("#txtKey").val()),
                        getCategories: true,
                        categories: $("#txtCategories").data("kendoMultiSelect").value().join(',')
                    };
                },
                pageSize: 20

            }),
            pageable: {
                messages: {
                    empty: "暂无数据"
                }
            },
            dataBound: function (e) {
                //让表头居中
                $("th.k-header").attr("style", "text-align:center; font-weight:bold;");
            }
        });
    });

    function CreateNewProduct() {
        wndGeneralEdit.setOptions({ title: "添加新的产品" });
        wndGeneralEdit.refresh({ url: "/Products/Product/Edit" });
        wndGeneralEdit.open();
    }

    function FilterProducts() {
        $("#grid_product").data("kendoGrid").dataSource.page(0);
    }
</script>
